<template>
  <div class="mt-5 bg-gray-300 p-5" title="父组件" :can-expan="false">
    <h3>父-组件</h3>
    <ul>
      <li>inject 接收到的参数, 响应对象 car:{{ car }}</li>
      <li>inject 接收到的参数, 响应对象 car:{{ car }}</li>
      <li>解构品牌 brand: {{ brand }}<Button @click="changeBrand">修改</Button>, 祖同步修改</li>
    </ul>

    <Child />
  </div>
</template>
<script lang="ts" setup>
  import { Button } from '@/components/Button';

  import Child from './Child.vue';
  import { ref, toRefs, inject } from 'vue';

  let car = inject('car', ref());

  // 解构品牌
  let { brand } = toRefs(car.value);

  // 修改品牌，则子组件、父组件全部同步修改
  function changeBrand() {
    brand.value += '~';
  }
</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }

  li {
    margin-top: 10px;
  }

  div {
    border-radius: 10px;
  }

  input {
    height: 25px;
    padding: 2px 5px;
    line-height: 25px;
  }
</style>
